<script setup lang="ts">
import {addAPointMarker, createAMap, createAnInformationForm, electronicFence, loadTheMap} from "@/stores/mapPageA";
import {onMounted, ref} from "vue";
import allData from "@/stores/data";
import company from "@/assets/images/company_default.png";
import company4 from "@/assets/images/cs_default.png";
import company3 from "@/assets/images/car_default.png";
import company5 from "@/assets/images/storage_default.png";
let map: any;
let sudu = ref<number>()
const startDrawing = ref()
const endDrawing = ref()
const startPlaying = ref()
const pausePlayback = ref()
const continuePlaying = ref()

const arr = [startPlaying, pausePlayback, continuePlaying,sudu]
const arr1 = [startDrawing,endDrawing]
const markers = ref()

// let sudu = ref<number>()
async function init() {
  // 加载地图
  const AMap = await loadTheMap(["AMap.Scale", "AMap.MoveAnimation", "AMap.MouseTool"])
  //  创建地图
  //   [114.53915,36.625849]
  map = createAMap(AMap, [114.53915, 36.625849])
  // 添加点标记
  console.log(allData)
   markers.value = allData.map(item => {
    const marker = addAPointMarker(AMap, item)
    //   信息窗体
    marker.on('click', function () {
      createAnInformationForm(AMap, item, map, marker, arr).open(map, marker.getPosition());
    })
    return marker;
  })
  map.add(markers.value);
//   电子围栏
  electronicFence(arr1,AMap,map)
}

const list = ref([{id:0,content:company,checked:false},
  {id:1,content:company4,checked:false},
  {id:2,content:company3,checked:false},
  {id:3,content:company5,checked:false}]);


function changeChacked(item1: any){
  item1.checked = !item1.checked;
  const arr: any = []
  list.value.forEach(item => {
    if (item.checked) {
      arr.push(item.id);
    }
  })
  allData.forEach((item,index) => {
    if (arr.includes(item.type)){
      markers.value[index].setMap(null);
    }else {
      markers.value[index].setMap(map);
    }
  })
}
onMounted(() => {
  console.log(arr[0].value)
  init()
})
</script>

<template>
  <div class="button">
    <div class="startDrawing" ref="startDrawing">开始绘制</div>
    <div class="endDrawing" ref="endDrawing">结束绘制</div>
  </div>
  <div class="trackPlayback">
    <h3>轨迹回放控制</h3>
        <input type="text" v-model="sudu" class="sudu1">
    <div class="startPlaying" ref="startPlaying">开始播放</div>
    <div class="pausePlayback" ref="pausePlayback">暂停播放</div>
    <div class="continuePlaying" ref="continuePlaying">继续播放</div>
  </div>
  <div class="fixed">
    <div  v-for="item in list" :key="item.id" >
      <input type="checkbox" :checked="item.checked" @click="changeChacked(item)">
      <img :src="item.content" alt="" class="tuLi">
    </div>
  </div>
  <div id="mapContainner"></div>
</template>

<style scoped>
#mapContainner {
  width: 100%;
  height: 100vh;
}
.fixed{
  position: fixed;
  top:20px;
  right: 30px;
  z-index: 500;
}

.tuLi{
  width: 30px;
  height: 40px;

}
</style>
